
class Slice{
	
	constructor(box, width, height, data, ind, ms, dir) {
		var that = this;
		// 数据
		this.len = data.length;
		// 下标
		this.ind = ind;
		// 方向
		this.dir = dir;
	    
		// 初始化函数
		this.init = function(){
			this.createHTML();
			this.tab();
			this.auto();
		}
		
		// 轮播图的html结构部分
		this.createHTML = function(){
			// 承载轮播图效果的容器
			box.className = "slice";
			box.style.width = width+"px";
			box.style.height = height+"px";
			// 虚拟节点
			var tmp = document.createDocumentFragment();
			// 创建ul
			var ul = document.createElement("ul");
			tmp.appendChild(ul);
			ul.style.width = width*(this.len+1)+"px"; // 无缝轮播，需要加1长图片的宽度
			ul.style.position = "absolute";
			// 创建 ul>li
			for( var i=0; i<this.len; i++ ){
				var li = document.createElement("li");
				ul.appendChild(li);
				// a
				var a = document.createElement("a");
				li.appendChild(a);
				a.href = data[i].url;
				a.target = "_blank";
				a.title = data[i].title;
				// img
				var img = document.createElement("img");
				a.appendChild(img);
				img.src = data[i].img;
				img.style.width = width+"px";
				img.style.height = height+"px";
			}
			that.ul = ul; // 目的是为了让其他的函数拿到这个ul
			// 因为想做无缝轮播，所以需要把第一个li拷贝出来一份，追加到ul的最后
			ul.appendChild(ul.firstElementChild.cloneNode(true));
			// 创建ol
			var ol = document.createElement("ol");
			tmp.appendChild(ol);
			that.ol = ol;
			ol.style.position = "absolute";
			ol.style.right = 0;
			ol.style.bottom = 0;
			// 创建 ol>li
			for( let i=0; i<this.len; i++ ){
				var li = document.createElement("li");
				ol.appendChild(li);
				// span
				var span = document.createElement("span");
				li.appendChild(span);
				// 点击span时，切换图片
				span.onclick = function(){
					that.ind = i;
					that.tab();
				}
			}
			// 左箭头
			var pLeft = document.createElement("p");
			tmp.appendChild(pLeft);
			pLeft.innerHTML = "&lt;";
			pLeft.style.left = "0px";
			pLeft.onclick = this.left;
			that.pLeft = pLeft;
			
			// 右箭头
			var pRight = document.createElement("p");
			tmp.appendChild(pRight);
			pRight.innerHTML = "&gt;";
			pRight.style.right = "0px";
			pRight.onclick = this.right;
			that.pRight = pRight;
			
			// 左右箭头样式
			pLeft.style.top = pRight.style.top = (height-pLeft.offsetHeight)/2+"px";
			
			// 到真实节点
			box.appendChild(tmp);
		}
		// 左箭头的点击事件
		this.left = function(){
			that.dir = -1;
			that.ind += that.dir;
			that.tab();
		}
		// 右箭头的点击事件
		this.right = function(){
			that.dir = 1;
			that.ind += that.dir;
			that.tab();
		}
		
		// 切换图片
		this.tab = function(){
			// 上限
			if( that.ind==that.len ){ // 意味着第4张图片切换到第1张图片
				// 意味着第4张图片切换到第5张图片
				startMove(that.ul, {"left":-1*that.ind*width}, function(){that.ul.style.left="0px"});
				that.ind = 0;
			}else if( that.ind==-1 ){ // 下限
				that.ul.style.left = -1*that.len*width+"px";
				that.ind = that.len-1;
				startMove(that.ul, {"left":-1*that.ind*width});
			}else{
				startMove(that.ul, {"left":-1*that.ind*width});
			}
			
			// 按钮的样式
			var spans = that.ol.querySelectorAll("span");
			for( var i=0; i<that.len; i++ ){
				spans[i].classList.remove("selected");
			}
			// 图片对应的按钮样式设为高亮
			spans[that.ind].classList.add("selected");
		}
		
		this.over = function(){
			clearInterval(that.timer);
			// 鼠标进入div时，显示按钮
			startMove(that.pRight, {"opacity":100});
			startMove(that.pLeft, {"opacity":100});
			startMove(that.ol, {"opacity":100});
		}
		
		this.out = function(){
			that.timer = setInterval(that.next, ms);
			startMove(that.pRight, {"opacity":0});
			startMove(that.pLeft, {"opacity":0});
			startMove(that.ol, {"opacity":0});
		}
		
		this.next = function(){
			that.ind += that.dir;			
			that.tab();
		}
		
		this.auto = function(){
			this.timer = setInterval(this.next, ms);
			
			box.onmouseover = this.over;
			box.onmouseout = this.out;
		}
		// 每当使用该类时，自动触发init方法
		this.init();
		
	}
	
}